<!-- 诉求处理页面(政府端) -->
<template>
  <div>
    <!-- <el-page-header @back="goBack"></el-page-header> -->
      <el-form ref="form" :model="form" label-width="140px">
      <el-form-item label="诉求主题">
          <el-input v-model="form.appealthemeName"></el-input>
      </el-form-item>
      <el-form-item label="诉求内容">
          <el-input type="textarea" v-model="form.appealcontent"></el-input>
      </el-form-item>
      <el-form-item label="诉求回复">
      <!-- <div v-for="(item,index) in comple" :key="item" :class="{on:index%2==0,off:index%2!=0}">
        <el-input type="textarea" v-model="item.feedbackcontent"></el-input>
      </div> -->
      <ul class="box">
      <!--利用v-for中的index值，绑定样式来实现隔行变色效果-->
        <li class="box-1" v-for="(item,index) in complete" :class="{on:index%2==0,off:index%2!=0}">{{item.feedbackdepar}}:&nbsp;{{item.feedbackcontent}}</li>
      </ul>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="ruleForm" label-width="140px">
      <el-form-item label="回复内容">
          <el-input type="textarea" v-model="ruleForm.feedbackcontent"></el-input>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="completeAdd">立即回复</el-button>
          <el-button @click="goBack" type="text" size="small">返回</el-button>
      </el-form-item>
    </el-form>
     

  </div>
</template>

<script>
export default {
data () {
  return {
    form: {
      appealthemeName: '',
      appealcontent: '',
    },
    ruleForm: {
      feedbackcontent: '',
    },
    complete: [],
    selectappealByidUrl: 'http://localhost:8081/appeal/selectappealByid',
    selectCompleteAllbyidUrl: 'http://localhost:8081/appeal/selectCompleteAllbyid',
    completeAddUrl: 'http://localhost:8081/appeal/completeAdd',
  }
},
methods: {

  // 返回上一层
  goBack () {
    console.log('go back')
    this.$router.go(-1)
  },
  //根据诉求id查询诉求内容
  selectbyId () {
    // alert(this.$route.query.appealid)
    axios.get(this.selectappealByidUrl + '/' + this.$route.query.appealid).then(
      res => {
        console.log(res.data)
        this.form = res.data
      }
    ).catch(
      err => {
        console.log(err)
      }
    )
  },
  //根据诉求id查询所有诉求回复
  selectCompleteAllbyid(){
    axios.get(this.selectCompleteAllbyidUrl + '/' + this.$route.query.appealid).then(
      res => {
        console.log(res.data)
        this.complete = res.data
      }
    ).catch(
      err => {
        console.log(err)
      }
    )
  },
  completeAdd(){
    axios.post(this.completeAddUrl+'/'+this.$route.query.appealid+'/'+this.ruleForm.feedbackcontent+'/2').then(
      res => {
        console.log(res.data)
        if(res.data === 'defail'){
          alert('该诉求已完结，无法再次回复')
        }else{
          window.location.reload()
        }

       
      }
    ).catch(
      err => {
        console.log(err)
      }
    )
  },

},
mounted(){
  this.selectCompleteAllbyid()
  this.selectbyId()
}
}
</script>

<style>
.el-input__inner{
  width: 60%;

}
 /* .el-input{
  text-align: left;
}*/
.el-form-item__label{
  /* background-color: rgb(43, 83, 214);
  color: white; */
  text-align: right;
}
.el-form-item{
  width: 50%;
  text-align: left;
  margin-top: 20px;
  padding-left: 10px;
}
.box-1:nth-of-type(even) {
  /* text-align: right; */
  /* background-color: rgb(197, 190, 190); */
  border-bottom: 1px dashed;
 
 }
 .box-1:nth-of-type(odd) {
  /* background-color: rgb(210, 210, 230); */
  border-bottom: 1px dashed;
 }
 .box{
  list-style: none;
 }
 .el-form{
  margin-top: 40px;
  margin-left: 20px;
 }
 #divform{
  margin-top: 0px;
  margin-left: 90px;
 }

</style>
